<template>
	<view class="address_add_form">
		<u-form :model="form" ref="uForm" label-width='auto'>
			<u-form-item label="联系人" prop="contactName">
				<u-input v-model="form.contactName" placeholder="请输入" />
			</u-form-item>
			<u-form-item label="手机号" prop="contactPhone">
				<u-input type="number" v-model="form.contactPhone" placeholder="请输入" />
			</u-form-item>
			<u-form-item label="地址" prop="location">
				<u-input @click='handLocation' disabled v-model="form.location" placeholder="请选择" />
			</u-form-item>
			<u-form-item label="街道" prop="street">
				<u-input v-model="form.street" placeholder="请选择" />
			</u-form-item>
			<u-form-item label="设为默认">
				<!-- 是否默认 1是 2否 -->
				<u-switch slot="right" v-model="form.switchVal"></u-switch>
			</u-form-item>
		</u-form>
		<view class="sub_btn">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
		<u-select value-name='lable' label-name='value' v-model="show" mode="mutil-column-auto" :list="cityData"
			@confirm="confirm"></u-select>
	</view>
</template>

<script>
	import provinceData from '@/utils/province.js'
	export default {
		data() {
			return {
				cityData: provinceData,
				show: false,
				form: {
					contactName: '',
					contactPhone: '',
					location: '',
					switchVal: false,
					isDefault: 2,
					street: '',
					userId: '',
					// createTime: '123123'
				},
				rules: {
					contactName: [{
						required: true,
						message: '请输入联系人',
						trigger: ['blur', 'change']
					}],
					contactPhone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					location: [{
						required: true,
						message: '请选择地址',
						trigger: ['blur', 'change']
					}],
					street: [{
						required: true,
						message: '请输入街道',
						trigger: ['blur', 'change']
					}],
					addressId: '',
					goodsDetails: '',
					isOrder: false //是否是直接从订单页面跳转
				}
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			if (e && e.details) {
				this.form = JSON.parse(e.details)
				this.form.switchVal = this.form.isDefault == 2 ? false : true
			}
			if (e && e.addressId) {
				this.addressId = e.addressId
				this.goodsDetails = e.goodsDetails
			}
			console.log(e, 'eee')
			if (e && e.goodsDetails) {
				this.goodsDetails = e.goodsDetails
			}
			if (e && e.isOrder) {
				this.isOrder = e.isOrder
			}
		},
		mounted() {
			this.form.userId = this.cache.getCache('userInfo').id
		},
		methods: {
			confirm(val) {
				console.log(val)
				// let str = ''
				this.form.location = val.map(item => item.label).join(',')
				// this.$set(this.form, 'location', address)
			},
			handLocation() {
				this.show = true
				// uni.chooseLocation({
				// 	success: (res) => {
				// 		const {
				// 			address
				// 		} = res
				// 		if (address) {
				// 			this.$set(this.form, 'location', address)
				// 		}
				// 		console.log('位置名称：', res, this.form);
				// 		// console.log('详细地址：' + res.address);
				// 		// console.log('纬度：' + res.latitude);
				// 		// console.log('经度：' + res.longitude);	
				// 	}
				// });
			},
			submit() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						this.form.isDefault = this.form.switchVal == false ? 2 : 1
						let res = ''
						if (this.form.id !== undefined) {
							res = await this.$u.api.updateReceivingAddress(this.form)
						} else {
							res = await this.$u.api.addReceivingAddress(this.form)
						}
						console.log('验证通过', res);
						uni.showToast({
							icon: 'none',
							title: this.form.id !== undefined ? '编辑成功' : '添加成功'
						})
						if (this.isOrder) {
							console.log(this.goodsDetails,'detailsdetailsdetailsdetails')
							uni.navigateTo({
								url: '/pages/submitOrder/submitOrder?details=' + this.goodsDetails
							})
						} else {
							uni.navigateTo({
								url: `/pages/address/address?addressId=${this.addressId}&details=${this.goodsDetails}`
							})
						}

					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address_add_form {
		padding: 0 20rpx;

		.sub_btn {
			position: fixed;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			padding: 0 30rpx;
		}
	}
</style>
